<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/tag.tld" prefix="my"%>
<%@ taglib uri="/WEB-INF/tld/mobai-el-common.tld" prefix="el"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/three/static/ztree/zTreeStyle.css" />
		<title>职位列表</title>

	</head>

	<body>
		<div class="page-container">
			<!-------------------------------综合查询开始---------------------------------------------------------------------------->
			<form action="/three/bsp/post" method="post" id="form1">
				<div class="text-c">
					<table style="height: 80px; width: 800px; text-align: center;">
						<tr>
							<td align="right">职位编码：</td>
							<td align="left"><input type="text" name="postCode" class="input-text" style="width: 200px"></td>
							<td align="right">职位名称：</td>
							<td align="left"><input type="text" name="postName" class="input-text" style="width: 200px"></td>
							<td><button class="btn btn-success" type="submit">
								<i class="Hui-iconfont">&#xe665;</i> 查询
							</button></td>
						</tr>
					</table>
				</div>
				<!--------------------------综合查询结束---------------------------------------------------------------------------->

				<!---------------------------------添加开始--------------------------------------------------->
				<div class="cl pd-5 bg-1 bk-gray mt-20">
					<span class="l"> <a style="text-decoration: none"
					class="btn btn-primary radius ml-5" onClick="post_add()"
					href="javascript:;"><i class="Hui-iconfont">&#xe600;</i>添加职位信息</a>

				</span>
				</div>
				<!---------------------------------添加结束--------------------------------------------------->

				<!-----------------------------------显示所有开始------------------------------------------------->
				<div class="mt-20">
					<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
						<thead>
							<tr class="text-c">
								<th>职位编码</th>
								<th>职位名称</th>
								<th>备注</th>
								<th>更新时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${bisShopPostList }" var="post">
								<tr class="text-c">
									<td>${post.postCode }</td>
									<td>${post.postName }</td>
									<td>${post.postDesc }</td>
									<td>
										<f:formatDate value="${post.modifyTime==null?post.createTime:post.modifyTime }" pattern="yyyy-MM-dd" />
									</td>
									<td class="f-14 td-manage">
										<a style="text-decoration: none" class="ml-5" onClick='user_edit(${el:toJsonString(post)})' href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
										<a style="text-decoration: none" class="ml-5" onClick="post_del('${post.postId}','${post.postCode}')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</form>
			<!-----------------------------显示所有结束------------------------------------------------------->

			<!------ ----------------------添加 修改模态框开始---------------------------------------------------- -->
			<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content radius" id="radius">
						<div class="modal-header">
							<h3 class="modal-title">编辑员工信息</h3>
							<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
						</div>
						<div class="modal-body">
							<!------ ----------------------模态框内容部分开始---------------------------------------------------- -->
							<form class="form form-horizontal" id="form2" name="form2" action="" method="post">
								<input type="hidden" name="postId" id="postId" />
								<table style="height: 300px;border: 1px;">
									<tr class="text-c">
										<td>职位信息</td>
										<td>授权菜单</td>
									</tr>
									<tr class="text-c">
										<td>
											<div class="row cl">
												<label class="form-label col-xs-3 col-sm-4"><font color="red">*</font>职位编码：</label>
												<div class="formControls col-xs-6 col-sm-6">
													<input type="text" name="postCode" id="postCode" value="" class="input-text radius" />
												</div>
											</div>
										</td>
										<td rowspan="3">
											<input type="hidden" name="menuValue" id="menuValue" value="" class="form-control" />
											<ul id="tree" class="ztree"></ul>
										</td>
									</tr>

									<tr class="text-c">
										<td>
											<div class="row cl">
												<label class="form-label col-xs-3 col-sm-4"><font color="red">*</font>职位名称：</label>
												<div class="formControls col-xs-6 col-sm-6">
													<input type="text" name="postName" value="" class="input-text radius" />
												</div>
											</div>
										</td>
									</tr>

									<tr class="text-c">
										<td>
											<div class="row cl">
												<label class="form-label col-xs-3 col-sm-4">备注：</label>
												<div class="formControls col-xs-6 col-sm-6">
													<textarea class="textarea radius" name="postDesc" style="white: 80px" rows="5" cols="10"></textarea>
												</div>
											</div>
										</td>
									</tr>
								</table>
							</form>
							<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
						</div>
						<div class="modal-footer">
							<button class="btn btn-secondary radius" type="button" id="but" onclick="tj()">
							<i class="Hui-iconfont">&#xe632;</i> 保存
						</button>
							<button class="btn radius" data-dismiss="modal" aria-hidden="true" id="guanbi">关闭</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 添加 修改模态框结束--------------------------------------------------- -->

		</div>

		<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
		<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
		<script type="text/javascript" src="/three/static/formEdit.js"></script>
		<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
		<script type="text/javascript" src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
		<!--/_footer 作为公共模版分离出去-->

		<!--请在下方写此页面业务相关的脚本-->
		<script type="text/javascript" src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
		<script type="text/javascript" src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
		<script type="text/javascript" src="/three/static/ztree/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="/three/static/ztree/jquery.ztree.excheck.js"></script>
		<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
		<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script>
		<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
		<script type="text/javascript">
			/*职位信息-排序*/
			$('.table-sort').dataTable({
				"aaSorting": [
					[1, "desc"]
				], //默认第几个排序
				"bStateSave": true, //状态保存
				"pading": false,
				"aoColumnDefs": [
					//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
					{
						"orderable": false,
						"aTargets": [1, 4]
					} // 不参与排序的列
				]
			});

			/*表单失去焦点事件开始*/
			$("#postCode").blur(function() {
				postCodeyz();
			});

			function postCodeyz() {
				if($("#postCode").val() == "") {
					alert("请输入职位编码！！！");
				} else {
					$.ajax({
						type: 'POST',
						dataType: "text",
						url: "/three/bsp/checkpoatCode", //请求的action路径
						data: {
							postCode: $("#postCode").val()
						},
						async: false,
						success: function(data) {
							if(data != "") {
								alert(data);
								$("#postCode").val("");
							}
						}
					});
				}
			}

			/*职位信息-刷新模态框*/
			$('#modal').on('hidden.bs.modal', function() {
				window.location.reload();
			});

			/*职位信息-添加打开模态框*/
			function post_add() {
				$.ajax({
					type: 'POST',
					dataType: "json",
					url: "/three/bsp/queryMenus", //请求的action路径
					async: false,
					success: function(data) {
						var setting = {
							check: {
								enable: true
							},
							data: {
								key: {
									title: "menuName",
									name: "menuName",
									url: "notexists"
								},
								simpleData: {
									enable: true,
									idKey: "menuId",
									pIdKey: "parentId",
									rootPId: 0
								}
							}
						}
						$(document).ready(function() {
							$.fn.zTree.init($("#tree"), setting, data);
							expandAll("tree");
						});
					}
				});
				$("#modal").modal("show");
			}

			/*职位信息-修改赋值*/
			function user_edit(post) {
				$.ajax({
					type: 'POST',
					dataType: "json",
					url: "/three/bsp/menusCheck", //请求的action路径
					data: {
						postId: post.postId
					},
					async: false,
					success: function(data) {
						var setting = {
							check: {
								enable: true
							},
							data: {
								key: {
									title: "menuName",
									name: "menuName",
									url: "notexists"
								},
								simpleData: {
									enable: true,
									idKey: "menuId",
									pIdKey: "parentId",
									rootPId: 0
								}
							}
						}
						$(document).ready(function() {
							$.fn.zTree.init($("#tree"), setting, data);
							expandAll("tree");
						});
					}
				});
				$("#modal").modal("show");
				$("#form2").formEdit(post);
			};

			/*职位信息-添加++修改*/
			function tj() {
					var menuValue = GetIDs();
					$("#menuValue").val(menuValue);
					if(menuValue == "") {
						alert("请选择职位要授权的菜单！！！");
					} else {
						if($("#postId").val() != null && $("#postId").val() != "") {
							console.log("修改");
							$("#form2").attr("action", "/three/bsp/post_update");
							$("#form2").submit();
						} else {
							console.log("添加");
							$("#form2").attr("action", "/three/bsp/post_add");
							$("#form2").submit();
						}
					}
			}

			/*职位信息-删除*/
			function post_del(postId, postCode) {
				layer.confirm('确认要删除吗？', function(index) {
					//console.log(postId+">>>");
					$("#form2").attr("action", "/three/bsp/post_del?postId=" + postId + "&postCode=" + postCode);
					$("#form2").submit();
					layer.msg('已删除!', {
						icon: 1,
						time: 1000
					});
				});
			};

			/* 完成ztree的自动展开功能开始 */
			var curStatus = "init",
				curAsyncCount = 0,
				asyncForAll = false,
				goAsync = false;

			function expandAll(did) {

				var zTree = $.fn.zTree.getZTreeObj(did);
				if(asyncForAll) {
					zTree.expandAll(true);
				} else {
					expandNodes(zTree.getNodes(), did);
					if(!goAsync) {
						curStatus = "";
					}
				}
			}

			function expandNodes(nodes, id) {
				if(!nodes)
					return;
				curStatus = "expand";
				var zTree = $.fn.zTree.getZTreeObj(id);
				for(var i = 0, l = nodes.length; i < l; i++) {
					zTree.expandNode(nodes[i], true, false, false);
					if(nodes[i].isParent && nodes[i].zAsync) {
						expandNodes(nodes[i].children, id);
					} else {
						goAsync = true;
					}
				}
			}

			//获取选中value值开始
			function GetIDs() {
				var treeObj = $.fn.zTree.getZTreeObj("tree"),
					nodes = treeObj.getCheckedNodes(true),
					v = "";

				for(var i = 0; i < nodes.length; i++) {
					v += nodes[i].menuId + ",";
				}

				return v;
			}

			//表单验证
			$("#form2").validate({
				rules: {
					postName: {
						required: true,
					},
				},
				onkeyup: false,
				focusCleanup: true,
			});
		</script>
	</body>

</html>